<template>
  <div class="xianqing">
    <!-- 背景 -->
    <Video></Video>
    <!-- 头部 -->
    <div class="top">云龙镇党建+安全服务平台</div>
    <!-- 内容 -->
    <div class="nei-1">
      <div class="nmax">
        <div class="nei-s" v-if="id === '党员学安全'"></div>
        <div class="nei-ss1" v-else></div>
        <div class="nei-s1">
          <Hour></Hour>
          <div class="guanbi" @click="gol">
            <img src="../../assets/xiangqingye/qx-1.png" />
            <span>关闭</span>
          </div>
        </div>
      </div>
      <div class="ms-1">
        <!-- <div class="toui-1" v-if="id === '党员学安全'">
          <div class="tuo-11">
            <span class="el-12">标题</span>
            <input v-model="input" placeholder="请输入标题" class="mins-1" />
          </div>
          <div class="botton">
            <div class="but-1">重置</div>
            <div class="but-2">搜索</div>
          </div>
        </div> -->
        <el-form :model="form" label-width="120px">
          <el-form-item>
            <template v-slot:label>
              <span
                style="
                  color: white;
                  font-size: 20px;
                  text-align: center;
                  line-height: 50px;
                "
                >标题</span
              >
            </template>
            <el-col :span="6">
              <el-input v-model="form.name" width="180" :style="inputStyles" />
            </el-col>
            <el-col :span="12"> </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <div v-if="id === '党员学安全'" class="el-wa1">
          <el-table
            :row-style="getRowStyle"
            class="no-border"
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{
              color: '#ffffff',
              fontSize: '16px',
              borderBottom: '0px',
              fontWeight: '500',
              height: '50px',
              background:
                'linear-gradient(270deg, rgba(255,204,102,0.1) 0%, rgba(255,204,102,0.4) 51%, rgba(255,204,102,0.1) 100%)'
            }"
          >
            <el-table-column
              type="index"
              width="60"
              align="center "
              label="序号"
            >
              <template #default="scope">
                <span class="index1">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="标题" width="280" />
            <el-table-column prop="date" label="上传时间" width="380" />
            <el-table-column prop="address" label="备注" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <div @click="handleEdit(scope.row)" class="sc-1">
                  <img src="../../assets/xiangqingye/c-1.png" />
                  <span class="titles">查看详情</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 这里要用变量传递 -->
        <DxRw v-if="id === '典型人物'"></DxRw>
        <!-- 分页器 -->
        <div class="pagination-container">
          <div class="ptex">共55条</div>
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="90"
            class="mt-4"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bou-1"></div>
    <!-- 弹层 -->
    <Detaillayer ref="addc"></Detaillayer>
  </div>
</template>

<script lang="ts" setup>
import DxRw from './components/DxRw.vue'
import { useRoute } from 'vue-router'
import Video from '../Layout/Video.vue'
import Hour from '@/components/Hour.vue'
import Detaillayer from '@/components/Detaillayer.vue'
import { ref, computed, inject, type Ref } from 'vue'
import { useRouter } from 'vue-router'
const input = ref('')
type User = {
  date: string
  name: string
  address: string
}
const inputStyles = computed(() => {
  return {
    height: '50px' // 设置想要的高度
  }
})
type Input = {
  name: string
}
const form = ref<Input>({
  name: ''
})
const onSubmit = () => {}
const route = useRoute()
const id = route.query.id
//打开弹层
const addc = ref()
const handleEdit = (id: User) => {
  console.log(id)
  addc.value.dialogTableVisible = true
}
const tableData: User[] = [
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }
]
const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
  let background =
    rowIndex % 2 === 0
      ? 'linear-gradient(270deg, rgba(255,204,102,0.03) 0%, rgba(255,204,102,0.1) 51%, rgba(255,204,102,0.03) 100%)'
      : 'rgba(73,17,16,0.7)'
  return {
    height: '50px',
    fontSize: '16px',
    fontWeight: '400',
    color: '#FFFFFF',
    background
  }
}
//分页请求
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const router = useRouter()
//页面跳转
const gol = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
/* 表格最外边框 */

.xianqing {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  .top {
    width: 100%;
    /* margin: 0 auto; */
    height: 60px;
    background-image: url('../../assets/xiangqingye/t-1.png');
    background-repeat: no-repeat;
    background-position: center;
    font-size: 30px;
    font-family: FZZYJW--GB1-0, FZZYJW--GB1;
    font-weight: normal;
    color: #ffffff;
    line-height: 34px;
    text-align: center;
    letter-spacing: 4px;
  }
  .nei-1 {
    width: 1920px;
    height: 980px;
    /* opacity: 0.5; */
    margin: 0 auto;
    background-image: url('../../assets/Home/y-2.png'),
      url('../../assets/Home/b-1.png'), url('../../assets/Home/y-1.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
      left center,
      center center,
      right center;

    background-size:
      10% 100%,
      100% 100%,
      10% 100%;
    box-sizing: border-box;
    padding: 60px;
    .nmax {
      display: flex;
      justify-content: space-between;
      /* background-color: red; */
      background-image: url('../../assets/Home/s-1.png');
      background-repeat: no-repeat;
      background-size: 100% 100px;
      margin-bottom: 80px;
      .nei-s {
        width: 1000px;
        height: 90px;
        /* background-color: antiquewhite; */
        background-image: url('../../assets/xiangqingye/y-1.png');
        background-repeat: no-repeat, no-repeat;
        background-size: cover;
        margin-right: 10px;
      }
      .nei-ss1 {
        width: 1000px;
        height: 90px;
        /* background-color: antiquewhite; */
        background-image: url('../../assets/dancen/y-3.png');
        background-repeat: no-repeat, no-repeat;
        background-size: cover;
        margin-right: 10px;
      }
      .nei-s1 {
        /* background-color: aqua; */
        width: 220px;
        box-sizing: border-box;
        margin-left: 300px;
        margin-top: -50px;
        .guanbi {
          cursor: pointer;
          margin-left: 50%;
          display: flex;
          align-items: center;
          font-size: 16px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .ms-1 {
      .el-wa1 {
        background: rgba(73, 17, 16, 0.7);
        border: 1px solid;
        border-image: linear-gradient(
            360deg,
            rgba(255, 204, 102, 0.1),
            rgba(255, 204, 102, 1),
            rgba(255, 204, 102, 0.1)
          )
          1 1;
      }
      /* 图片展示 */
      box-sizing: border-box;
      width: 100%;
      /* background-image: url('../../assets/Home/b-1.png'); */
      background-size: 100%; /* 让背景图片覆盖整个元素 */
      background-repeat: no-repeat; /* 不重复背景图片 */
      /* background-position: center top -141px; */
      .pagination-container {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        .ptex {
          margin-right: 10px;
          font-size: 16px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
        }
        ::v-deep .btn-prev {
          background-color: rgba(141, 82, 77, 0.5);
          color: #fff;
          border: 1px solid rgba(182, 182, 182, 0.4);
        }
        ::v-deep .number {
          border: 1px solid rgba(182, 182, 182, 0.4);
          background-color: rgba(141, 82, 77, 0.5);
          color: #fff;
        }
        ::v-deep .btn-next {
          border: 1px solid rgba(182, 182, 182, 0.4);
          background-color: rgba(141, 82, 77, 0.5);
          color: #fff;
        }
      }
      ::v-deep() .is-active {
        background: linear-gradient(180deg, #ffd480 0%, #b1642d 100%);
        border-radius: 4px;
      }
      .sc-1 {
        display: flex;
        align-items: center;
        cursor: pointer;
        .titles {
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffcc66;
        }
      }
      margin-top: 40px;
      .toui-1 {
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .botton {
          display: flex;
          .but-1 {
            width: 100px;
            height: 40px;
            background: linear-gradient(180deg, #ffd480 0%, #995626 100%);
            border-radius: 4px;
            opacity: 0.6;
            font-size: 16px;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            margin-right: 10px;
            cursor: pointer;
          }
          .but-2 {
            width: 100px;
            height: 40px;
            background: linear-gradient(180deg, #ffd480 0%, #995626 100%);
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 40px;
            cursor: pointer;
          }
        }
        .tuo-11 {
          .el-12 {
            font-size: 16px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-right: 10px;
          }
          .mins-1 {
            width: 600px;
            height: 40px;
            background: rgba(65, 20, 20, 0.7);
            border-radius: 4px;
            border: 1px solid #ffcc66;
          }
        }
      }
      .el-1 {
        /* display: flex; */
        font-size: 16px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      ::v-deep() .index1 {
        font-size: 16px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      ::v-deep() .no-border .el-table__body,
      .no-border .el-table__footer,
      .no-border .el-table__header {
        border: none;
      }
      ::v-deep() .el-table tr {
        background-color: #541e1e !important;
        font-size: 16px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      .el-table {
        ::v-deep tbody tr:hover > td {
          background: linear-gradient(
            270deg,
            rgba(255, 204, 102, 0.03) 0%,
            rgba(255, 204, 102, 0.1) 51%,
            rgba(255, 204, 102, 0.03) 100%
          );
        }
      }
      ::v-deep() .el-table {
        --el-table-border-color: none;
        --el-table-border: none;
        --el-table-fixed-left-column: none;
        --el-table-text-color: none;
        --el-table-header-text-color: none;
        --el-table-row-hover-bg-color: none;
        --el-table-current-row-bg-color: none;
        --el-table-fixed-right-column: none;
        --el-table-fixed-box-shadow: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
        --el-table-expanded-cell-bg-color: none;
        --el-table-header-bg-color: none;
      }
    }
  }
  .bou-1 {
    width: 1920px;
    height: 60px;
    background-image: url('../../assets/xiangqingye/b-1.png');
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>
